﻿//
//  List Item
//
define([
    "epi",
    "dojo",
    "dojo/_base/lang",
    "dojo/_base/connect",
    "dojo/_base/array",
    "dojo/json",

    "dijit",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",

    "epi/shell/dnd/Target",

    "dojo/text!./ListItemPropertyWidget.html",
    "xstyle/css!./ListItemPropertyWidget.css"
],

function (
    epi,
    dojo,
    lang,
    connect,
    array,
    json,

    dijit,
    _Widget,
    _TemplatedMixin,
    _WidgetsInTemplateMixin,

    Target,

    template
) {

    return dojo.declare("ow-epi-listProperty.widgets.ListItemPropertyWidget", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {

        templateString: template,

        helptext: "List item",

        baseClass: 'list-property-item',

        listItem: null,
        list: null,

        itemDisplayNamePropertyName: null,

        postMixInProperties: function () {
            this.inherited(arguments);

            this.acceptDataTypes = this.acceptDataTypes || ['listItem'];
        },

        postCreate: function () {
            this.inherited(arguments);

            this._dropTarget = new Target(this.dropAreaNode, {
                accept: this.acceptDataTypes,
                createItemOnDrop: false,
                readOnly: this.readOnly
            });
            this.connect(this._dropTarget, "onDropData", "_onDropData");

            this.connect(this._dropTarget, "onDndStart", "_onDragStart");
            this.connect(this._dropTarget, "onDndCancel", "_onDragCancel");
        },

        _setReadOnlyAttr: function (value) {
            this._set('readOnly', value);
        },

        _setListItemAttr: function (value) {
            this.listItem = value;

            var innerHtml = '';
            if (this.itemDisplayNamePropertyName) {
                innerHtml = this.listItem[this.itemDisplayNamePropertyName];
            } else {
                innerHtml = 'Item ' + (array.indexOf(this.list, this.listItem) + 1);
            }

            dojo.attr(this.nodeItemLink, { innerHTML: innerHtml });
            dojo.attr(this.domNode, { dndData: this._getDndData() });
        },

        _getDndData: function () {
            var itemIndex = array.indexOf(this.list, this.listItem);
            return json.stringify({ itemIndex: itemIndex });
        },

        editItem: function () {
            this.onEditItem(this.listItem);
        },

        deleteItem: function () {
            if (this.readOnly) {
                return;
            }
            this.onDeleteItem(this.listItem);
        },

        onEditItem: function (listItem) {
            // EditItem event
        },

        onDeleteItem: function (listItem) {
            // DeleteItem event
        },

        _onDropData: function (dndData, source, nodes, copy) {
            var dropItem = dndData ? (dndData.length ? dndData[0] : dndData) : null;

            if (dropItem) {
                dojo.when(dropItem.data, dojo.hitch(this, function (value) {
                    this.onDropItem(this.listItem, value);
                }));
            }
            this._onDragEnd();
        },

        onDropItem: function (listItem, dndSourceItem) {
            // Drop on item event
        },

        _onDragStart: function (source, nodes, copy) {
            if (this.readOnly) {
                return;
            }

            if (nodes.length === 1) {
                // cannot drop on source
                if (nodes[0] == this.domNode) {
                    return;
                }

                var dndData = source.getItem(nodes[0].id);
                if (dndData && dndData.type && dndData.type.length > 0) {
                    if (dndData.type[0] != 'listItem') {
                        return;
                    }
                }

                dojo.addClass(this.dropAreaNode, 'allow-drop');
            }
        },

        _onDragCancel: function () {
            this._onDragEnd();
        },

        _onDragEnd: function () {
            dojo.removeClass(this.dropAreaNode, 'allow-drop');
        }
    });
});